<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
@media screen and (max-width: 960px) {
    #nav#full {
        display:none
    }
 
    nav#mobile {
        background-color:#111;
        box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
        display:block;
    }
 
    /*
    Top black bar that holds the toggle button
    */
 
    nav#mobile #toggle-bar {
        line-height:70px;
        height:70px;
    }
 
    /*
    Toggle button #1 ("Menu")
    */
 
    nav#mobile strong a {
        margin-left:30px;
        border:1px solid #444;
        padding:10px;
    }
 
    /*
    Toggle button #2 ("Navicon")
    */
 
    nav#mobile .navicon {
        float: right;
        height: 6px;
        width: 34px;
        margin: 20px;
        border-top: 18px double #FFF;
        border-bottom: 6px solid #FFF;
        font-size:0;
    }
 
    /*
    The dropdown menu
    */
 
    nav#mobile ul li {
        clear:both;
        list-style:none;
    }
 
    nav#mobile ul li a {
        display:block;
        background-color:#300;
        text-transform:uppercase;
        letter-spacing:.2em;
        margin:2px 0;
        padding:6px 0 6px 8px;
    }
 
    nav#mobile ul ul {
        font-size:small;
    }
 
    nav#mobile ul ul li {
        margin-left:30px;
    }
 
    nav#mobile ul ul a {
        background-color:#333;
        padding-left:8px;
    }
 
    nav#mobile ul ul a:before {
        content: "2192";
        padding-right:8px;
    }
}-->
</style></head>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
        $("#mmenu").slideToggle(500);
    });
});
</script>
<body>
<nav id="mobile">
 
    <div id="toggle-bar">
        <strong><a class="mtoggle" href="">MAIN MENU</a></strong>
        <a class="navicon mtoggle" href="">MAIN MENU</a>
    </div>
 
    <ul id="mmenu">
        <li><a href="">Home</a></li>
        <li><a href="">Products</a>
            <ul>
                <li><a href="">HTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">Javascript</a>
                    <ul>
                        <li><a href="">jQuery</a></li>
                        <li><a href="">MooTools</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>           
    </ul>
 
</nav></body>
</html>
